<template>
    <div class="leaderBg">
        <div class="leaderBox">
            <div class="picBox">
                <img src="../../assets/images/rwb.png" alt="">
            </div>
            <div class="titleBox">
                <div class="titleImgDiv">
                    <img src="../../assets/images/djb.png" alt="">
                </div>
                <div class="titleImgDiv">
                    <img src="../../assets/images/gsz.png" alt="">
                </div>
                <div class="titleImgDiv">
                    <img src="../../assets/images/gscg.png" alt="">
                </div>
            </div>
            <div class="detailBox">
                <div class="borderBox" v-for="(item, index) in 3">
                    <table class="fixed-table">
                        <tr>
                            <th width="18%">序号</th>
                            <th width="42%">任务名称</th>
                            <th width="40%" v-if="index === 0">发起人</th>
                            <th width="40%" v-else>揭榜人</th>
                        </tr>
                    </table>
                    <div class="contentBox">
                        <table>
                            <tr>
                                <th width="18%">序号</th>
                                <th width="42%">任务名称</th>
                                <th width="40%">发起人</th>
                            </tr>
                            <tbody class="scroll-table scroll-animation">
                                <tr v-for="(item, index) in items" :key="index">
                                    <td>{{ index+1 }}</td>
                                    <td class="eclipsisText">{{ item.column1 }}</td>
                                    <td>{{ item.column2 }}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="leaderBox">
            <div class="picBox">
                <img src="../../assets/images/cgb.png" alt="">
            </div>
            <div class="titleBox">
                <div class="titleImgDiv">
                    <img src="../../assets/images/pb.png" alt="">
                </div>
                <div class="titleImgDiv">
                    <img src="../../assets/images/jb.png" alt="">
                </div>
                <div class="titleImgDiv">
                    <img src="../../assets/images/yb.png" alt="">
                </div>
            </div>
            <div class="detailBox">
                <div class="borderBox" v-for="(item, index) in 3">
                    <table class="fixed-table">
                        <tr>
                            <th width="18%">序号</th>
                            <th width="42%">任务名称</th>
                            <th width="40%" v-if="index === 0">得分</th>
                            <th width="40%" v-else-if="index === 1">奖励内容</th>
                            <th width="40%" v-else>成果转化</th>
                        </tr>
                    </table>
                    <div class="contentBox">
                        <table>
                            <tr>
                                <th width="18%">序号</th>
                                <th width="42%">任务名称</th>
                                <th width="40%" v-if="index === 0">得分</th>
                                <th width="40%" v-else-if="index === 1">奖励内容</th>
                                <th width="40%" v-else>成果转化</th>
                            </tr>
                            <tbody class="scroll-table scroll-animation">
                                <tr v-for="(item, ind) in items" :key="ind">
                                    <td>{{ ind+1 }}</td>
                                    <td>{{ item.column1 }}</td>
                                    <td v-if="index === 0">
                                        <el-icon v-for="(i, index) in item.column3" :size="17" color="#fee6b6"><Star /></el-icon>
                                    </td>
                                    <td width="40%" v-else>{{ item.column2 }}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
  
<script setup>
const baseUrl = import.meta.env.VITE_APP_BASE_API;
const { proxy } = getCurrentInstance();
import useAppStore from '@/store/modules/app'
import { ref } from "vue";
const appStore = useAppStore()
const items = ref([
  { id: 1, column1: '三门峡党委三门峡党委三门峡党委三门峡党委', column2: '大江', column3: 3 },
  { id: 2, column1: '渑池县党委', column2: '大江', column3: 2 },
  { id: 3, column1: '义马市党委', column2: '大江', column3: 3 },
  { id: 4, column1: '数据4', column2: '大江', column3: 4 },
  { id: 5, column1: '数据5', column2: '大江', column3: 5 },
  { id: 6, column1: '数据6', column2: '大江', column3: 1 },
  { id: 7, column1: '数据7', column2: '大江', column3: 3 },
  { id: 8, column1: '数据8', column2: '大江', column3: 1 }
]);


// 初始化数据
function initData() {
    
}
onMounted(() => {
    appStore.toggleSideBarHide(true);
    document.querySelector('.navbar').remove();
    document.querySelector('.tags-view-container').remove();
    document.querySelector('.sidebar-container').remove();
    document.querySelector('.fixed-header').remove();
    document.querySelector('.fixed-top').remove();
    initData();
})

onUnmounted(() => {
});
</script>
<style>
.app-wrapper .main-container .app-main {
    height: 100%!important;
    background: linear-gradient(to right bottom, rgb(24, 48, 132) 0%, rgb(21, 16, 51) 100%)!important;
}
.scroll-container {
  height: 100%!important;
  overflow: hidden;
  margin-top: 9px;
}
.scroll-content {
  height: 600px; /* 足够高以确保滚动 */
}
</style>
<style lang="scss" scoped>
.leaderBg{
    position: relative;
    display: flex;
    justify-content: space-between;
    height: 100%;
    background-image: url("../../assets/images/jbgs.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    font-family: CapCut Sans,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Arial,sans-serif!important;
    font-size: 15px;
}
.leaderBg .leaderBox{
    position: relative;
    top: 15%;
    width: 45%;
    height: 80%;
    display: flex;
    align-items: center;
    flex-direction: column;
    .titleBox{
        width: 100%;
        display: flex;
        justify-content: space-between;
        .titleImgDiv {
            width: 244px;
            height: 79px;
            margin-right: 10px;
            img{
                width: 100%;
                height: 100%;
            }
        }
    }
    .detailBox {
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 100%;
        margin: 19px;
        .borderBox{
            position: relative;
            width: 30%;
            height: 90%;
            border: 33px solid #fff;
            border-image: url("../../assets/images/border.svg") 33 round;
            color: #fff;
            font-size: 24px;
            font-weight: bold;
            text-align: center;
            margin-right: 9px;
            .contentBox{
                position: absolute;
                top: 21px;
                left: -19px;
                background-color: rgba(249, 76, 76, 0.5);
                color: rgba(252, 228, 196, 1);
                margin: 0px;
                padding: 0px;
                width: 120%;
                height: 90%;
                overflow: hidden;
            }
        }
    }
}
.fixed-table {
    z-index: 9999;
    background-color: #d52c2b;
    height: 10%;
    width: 120%;
    position: absolute;
    top: 20px;
    left: -19px;
    overflow: hidden;
}
table {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 370px;
    color: #fee6b6;
    border-collapse: collapse;
    overflow: hidden;
    z-index: 9000;
    tr{
        width: 100%;
        th, td {
            padding: 9px 5px;
            text-align: center;
            font-size: 13px;
        }
        th {
            position: sticky;  
            top: 0;
            font-size: 15px;
        }
    }
}

/* 高亮当前行 */
tbody tr:hover {
    background: rgba(0, 150, 255, 0.1);
}

/* 表格主体 */
.scroll-table {
    width: 100%;
    border-collapse: collapse;
    color: #fee6b6;
    transform: translateY(0); /* 初始位置 */
    overflow: hidden;
}

/* 滚动动画 */
.scroll-animation {
    animation: scroll 9s linear infinite;
}

@keyframes scroll {
    0% { transform: translateY(0); }
    100% { transform: translateY(-100%); } /* 滚动到数据末尾 */
}

/* 悬停暂停 */
.contentBox:hover .scroll-table {
    animation-play-state: paused;
}

.eclipsisText1 {
    width:10px;
    table-layout:fixed;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
</style>